<template>
  <div class="margin-container-list">
    <div>
      <div class="title-row">
        <span class="font-color-6">券名称：</span>
        <span>{{coupon.couponName}}({{dict.couponType[coupon.couponType]}})</span>
      </div>
      <div class="flex flex-between pad-l-20 pad-r-20 pad-t-30 pad-b-30 mar-b-20 bg-color-white">
        <div class="flex-item flex-evenly shodow-box">
          <div class="align-c">
            <div class="total-count">{{couponStat.memberCouponNum||0}}</div>
            <div class="mar-t-30 font-16 font-color-9">领取人数</div>
          </div>
          <div class="align-c">
            <div class="total-count">{{couponStat.receiveNum||0}}</div>
            <div class="mar-t-30 font-16 font-color-9">领取券数</div>
          </div>
          <div class="align-c">
            <div class="total-count">{{couponStat.availableNum||'不限数量'}}</div>
            <div class="mar-t-30 font-16 font-color-9">剩余券数</div>
          </div>
        </div>
        <div class="flex-item flex-evenly shodow-box mar-l-22">
          <div class="align-c">
            <div class="total-count">{{couponStat.customerNum||0}}</div>
            <div class="mar-t-30 font-16 font-color-9">下单人数</div>
          </div>
          <div class="align-c">
            <div class="total-count">{{couponStat.orderNum||0}}</div>
            <div class="mar-t-30 font-16 font-color-9">下单单数</div>
          </div>
          <div class="align-c">
            <div class="total-count">{{couponStat.totalPrice||0}}</div>
            <div class="mar-t-30 font-16 font-color-9">下单金额(元)</div>
          </div>
        </div>
      </div>
      <div class="bg-color-white pad-l-20 pad-r-30">
        <!--顶部搜索 -->
        <div class="top-operate pad-t-20">
          <div>
            <div>
              <el-select class="select-class" v-model="coupon.textCol">
                <el-option label="券号" value="memberCouponNo"></el-option>
                <el-option label="店铺名称" value="memberNickname"></el-option>
                <el-option label="顾客昵称" value="customerNickname"></el-option>
                <el-option label="顾客手机号" value="customerPhone"></el-option>
                <el-option label="关联订单号" value="orderNo"></el-option>
              </el-select>
              <el-input class="mar-l-20" style="width: 200px;" v-model="coupon.textValue" placeholder="请输入内容"></el-input>
              <el-button type="primary" plain @click="handleSearch" class="mar-l-20">查询</el-button>
              <el-button class="mar-l-20" plain="" @click="resetSearch">重置</el-button>
              <el-button type="primary" @click="exportData" class="mar-l-20">导出</el-button>
            </div>
          </div>
        </div>
        <!-- 内容列表 -->
        <div class="table-container">
          <el-table ref="multipleTable" :data="orderList" v-loading="listLoading" element-loading-text="加载中" style="width: 100%"  @selection-change="handleSelectionChange">
            <el-table-column width="50px" type="selection"></el-table-column>
            <el-table-column width="200px" label="券号" prop="memberCouponNo"></el-table-column>
            <el-table-column width="180px" label="领取时间" prop="receivedTime"></el-table-column>
            <el-table-column width="180px" label="使用时间" prop="useTime"></el-table-column>
            <el-table-column width="150px" label="使用店铺" prop="memberNickname"></el-table-column>
            <el-table-column width="250px" label="顾客信息">
              <template slot-scope="scope">
                <template>
                  <div>昵称：{{ scope.row.customerNickname }}</div>
                  <div>{{ scope.row.customerPhone }}</div>
                </template>
              </template>
            </el-table-column>
            <el-table-column min-width="150px" label="关联订单号" prop="orderNo"></el-table-column>
            <el-table-column width="150px" label="订单金额" prop="actualPrice"></el-table-column>
            <el-table-column width="150px" label="优惠金额" prop="couponReduceAmount"></el-table-column>
          </el-table>
        </div>
        <!-- 列表分页 -->
        <div class="pagination mar-b-0 pad-b-20">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="searchListQuery.currentPage"
            :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
</style>

<script>
  import { getCoupon, pageMemberCoupon, statCouponByUseStatus } from '@/api/coupon/coupon'
  import { getDictByGroupName, downloadFile } from '@/api/common/common'

  export default {
    data() {
      return {
        total: 0,
        listLoading: true,
        multipleSelection: [],
        searchListQuery: {},
        defaultQuery: {
          enterpriseId: this.getEnterpriseId(),
          couponId: '',
          currentPage: 1,
          size: 10
        },
        coupon: {
          couponId: '',
          couponName: '',
          couponType: '',
          textCol: 'memberCouponNo',
          textValue: ''
        },
        couponStat: {
          memberCouponNum: '',
          availableNum: '',
          receiveNum: '',
          customerNum: '',
          orderNum: '',
          totalPrice: ''
        },
        endCouponVisible: false,
        editCouponInfo: {},
        dict: {
          couponType: {}
        },
        orderList: [],
        labels: {
          '0': '待发布(0)',
          '1': '已发布(0)',
          '2': '已结束(0)',
          '100': '全部(0)'
        },
        couponStatus: ''
      }
    },
    // 初始化页面
    created() {
      const couponId = this.getCurrentPage().query.couponId
      getCoupon(couponId).then(response => {
        if (response.isError) {
          return
        }
        this.coupon.couponName = response.data.couponName
        this.coupon.couponType = response.data.couponType.toString()
      })
      getDictByGroupName('CouponDTO').then(response => {
        Object.assign(this.dict, response.data)
      })
      this.searchListQuery = { ...this.defaultQuery }
      this.coupon.couponId = couponId
      statCouponByUseStatus({ couponId: couponId, enterpriseId: this.getEnterpriseId() }).then(response => {
        if (response.isError) {
          return
        }
        Object.assign(this.couponStat, response.data)
      })
      this.init()
    },
    mounted() {
    },
    methods: {
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.init()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.init()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      setSearchListQuery() {
        // 搜索状态
        const currentPage = this.searchListQuery.currentPage
        const size = this.searchListQuery.size
        this.searchListQuery = { ... this.defaultQuery }
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        this.searchListQuery.couponId = this.coupon.couponId
        this.searchListQuery.currentPage = currentPage
        this.searchListQuery.page = currentPage
        this.searchListQuery.size = size
        this.searchListQuery[this.coupon.textCol] = this.coupon.textValue
      },
      init() {
        this.setSearchListQuery()
        pageMemberCoupon(this.searchListQuery).then(response => {
          if (response.isError) return
          this.total = response.data.total
          this.orderList = response.data.records
          this.listLoading = false
        })
      },
      handleSearch() {
        this.init()
      },
      resetSearch() {
        this.searchListQuery = { ... this.defaultQuery }
        this.coupon.textCol = 'memberCouponNo'
        this.coupon.textValue = ''
        this.init()
      },
      exportData() {
        if (this.multipleSelection.length > 0) {
          const orderIds = this.multipleSelection.map(item => item.orderId)
          downloadFile('/sell/coupon/exportData', { enterpriseId: this.getEnterpriseId(), couponId: this.searchListQuery.couponId, orderIds: orderIds.join(',') }, '券使用明细.xlsx')
        } else {
          this.setSearchListQuery()
          downloadFile('/sell/coupon/exportData', this.searchListQuery, '券使用明细.xlsx')
        }
      }
    }
  }

</script>
<style lang="less" scoped>
.margin-container-list{
  min-height: 100%;
  background: #FAFAFA;
  margin: 0;
  padding: 20px 20px 0;
}
.title-row{
  height: 76px;
  line-height: 76px;
  color: #333;
  font-size: 20px;
  background: #E2F0FF;
  padding-left: 20px;
}
.shodow-box{
  box-shadow: 0 0 15px rgba(154, 154, 154, 0.21);
  height: 172px;
}
.flex-evenly{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.total-count{
  font-size: 36px;
  color: #409EFF;
}
.mar-l-20{
  margin-left: 20px;
}
</style>
